
{[{define "user/index.html"}]}
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="/static/js/backend/user/list.js"></script>
    <script src="/static/js/common/request.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .page_title{
            font-size: 20px;
            padding-bottom: 20px;
        }
        .main_container {
            background-color: white;
            padding: 20px;
            height: 100vh;
        }

        .table_row {
            font-weight: 300
        }

        .operation_bar {
            display: flex;
            justify-content: center;
        }
    </style>

</head>

<body style="margin:0">
    <div id="app">
        <el-container class="main_container">
            <el-main>
                <el-row class="page_title">用户列表</el-row>
                <el-row type="flex" justify="space-between">
                    <el-col :span="10">
                        <el-button type="info" size="small" icon="el-icon-refresh"></el-button>
                        <el-button type="primary" icon="el-icon-plus" size="small">添加</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>
                    </el-col>
                    <el-col :span="4" style="display:flex">
                        <el-input size="small" placeholder="请输入搜索内容" v-model="searchInput" class="input-with-select">
                        </el-input>
                        <el-button style="margin-left: 8px" size="small" icon="el-icon-search"></el-button>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-table row-class-name="table_row" :data="tableData" border style="width: 100%">
                        <el-table-column align="center" header-align="center" type="selection" width="55">
                        </el-table-column>
                        <el-table-column header-align="center" align="center" fixed prop="id" label="ID" width="80">
                        </el-table-column>
                        <el-table-column header-align="center" align="center" prop="date" label="日期">
                        </el-table-column>
                        <el-table-column header-align="center" align="center" align="center" prop="name" label="姓名">
                        </el-table-column>
                        <el-table-column header-align="center" align="center" prop="province" label="省份">
                        </el-table-column>
                        <el-table-column header-align="center" align="center" prop="city" label="市区">
                        </el-table-column>
                        <el-table-column header-align="center" align="center" prop="address" label="地址">
                        </el-table-column>
                        <el-table-column header-align="center" align="center" prop="zip" label="邮编">
                        </el-table-column>
                        <el-table-column header-align="center" align="center" fixed="right" label="操作" width="120">
                            <template slot-scope="scope">
                                <div class="operation_bar">
                                    <el-button icon="el-icon-edit" icon="el-icon-edit" type="primary"
                                        @click="handleClick(scope.row)" size="mini"></el-button>
                                    <el-button icon="el-icon-delete" type="danger" size="mini"></el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <el-row style="margin-top:20px" type="flex" justify="end">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[20,30,50]" :page-size="20"
                        layout="total, sizes, prev, pager, next, jumper" :total="200">
                    </el-pagination>
                </el-row>
            </el-main>

        </el-container>
    </div>
</body>
<script type="text/javascript">
    let = new Vue({
        el: '#app',
        data: {
            searchInput: '',
            currentPage4:1,
            tableData: [{
                id: 1,
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                id: 2,
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: 200333
            }, {
                id: 3,
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: 200333
            }, {
                id: 4,
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: 200333
            }]
        },
        created(){
            this.pager({page:1,size:2})
        },
        methods: {
            pager(param){
                getList(param)
            },
            handleSizeChange(){},
            handleCurrentChange(){}
        }
    })
</script>

</html>
{[{end}]}